<template>
  <q-layout class='login-background'>
    <div class='absolute-center'>
      <q-card class='login-pannel'>
        <!--内容-->
        <q-card-section>
          <!--          大标题-->
          <!--          <div align='center' class='big-title'>-->
          <!--            logo图-->
          <!--            <div class='logo'></div>-->
          <!--            标题内容-->
          <div class='text-weight-bolder'>
            公司系统
          </div>
          <!--          </div>-->
          <!--          填写内容-->
          <form @submit.prevent.stop='onSubmit'>

            <div class='inside-pannel'>
              <div class='row row-space' v-if='type==1'>
                <div class='col-2 input-label'>
                  公司名称：
                </div>
                <div class='col-8'>
                  <q-input outlined label='输入公司名称' v-model='compony_name' ref='companyRef' filled
                           :rules="[val => (val && val.length > 0) || '此项必填']" />
                </div>
              </div>
              <div class='row row-space'>
                <div class='col-2 input-label'>
                  用户姓名：
                </div>
                <div class='col-8'>
                  <q-input outlined label='输入用户姓名' v-model='user_name' ref='staffRef' filled
                           :rules="[val => (val && val.length > 0) || '此项必填']" />
                </div>
              </div>
              <div class='row row-space'>
                <div class='col-2 input-label'>
                  手机号：
                </div>
                <div class='col-8'>
                  <q-input outlined label='输入手机号' v-model='loginID' maxlength='11' ref='phoneRef' filled
                           :rules="[val => (val&&val.length==11)|| '此项必填']" />
                </div>
              </div>
              <div class='row-space'>
                <q-input v-model='password' label='输入密码' filled :type="isPwd ? 'password' : 'text'" ref='pwRef'
                         :rules="[val => (val && val.length > 0&&val==again_password) || '此项必填']">
                  <template v-slot:append>
                    <q-icon
                      :name="isPwd ? 'visibility_off' : 'visibility'"
                      class='cursor-pointer'
                      @click='isPwd = !isPwd'
                    />
                  </template>
                </q-input>
              </div>
              <div class='row-space'>
                <q-input v-model='again_password' label='再次输入密码' filled :type="isPwd1 ? 'password' : 'text'"
                         ref='pwRef1' :rules="[val => (val && val.length > 0&&val==password) || '两次密码必须相同']"
                         @change='pwAgain'>
                  <template v-slot:append>
                    <q-icon
                      :name="isPwd1 ? 'visibility_off' : 'visibility'"
                      class='cursor-pointer'
                      @click='isPwd1 = !isPwd1'
                    />
                  </template>
                </q-input>
              </div>
              <div class='row row-space' v-if='type==2'>
                <div class='col-2 input-label'>
                  公司名称：
                </div>
                <q-btn-dropdown class='col-4' color='primary' :label=companyName>
                  <q-list v-for='(item,index) in compony_list.arr' :key='index'>
                    <q-item clickable v-close-popup @click='onItemClick(item.companyId,item.companyName)'>
                      <q-item-section>
                        <q-item-label>{{ item.companyName }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
              <div class='row row-space'>
                <div class='col-2'>
                </div>
              </div>
              <!--            操作按钮-->
              <div class='row row-space'>
                <div class='col-2'>
                  <q-btn class='login-control' label='注册' color="primary" type='submit' v-if='type==1' />
                  <q-btn class='login-control' label='注册' color="primary" type='submit' v-if='type==2' />
                </div>
                 <div class='col-2'>
                  <q-btn class="login-control" label="返回" @click="goBack()"></q-btn>
                </div>
              </div>
            </div>
          </form>
        </q-card-section>
      </q-card>
    </div>
  </q-layout>
</template>
<script lang='ts'>
import { defineComponent, onMounted, ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { postRequest, getRequest } from 'components/functions';
import { useQuasar } from 'quasar';

export default defineComponent({
  name: 'Register.vue',
  setup() {
    let route = useRoute();
    const $q = useQuasar();
    let compony_name = ref<string>();
    let user_name = ref<string>('');
    let loginID = ref<string>('');
    let password = ref<string>('');
    let isPwd = ref<boolean>(true);
    let isPwd1 = ref<boolean>(true);
    let again_password = ref<string>('');
    let type = ref<string>('');
    const compony_list = reactive({ arr: [] });
    let companyId = ref<string>('');
    let companyName = ref<string>('请选择公司名称');
    const companyRef = ref('');
    const staffRef = ref('');
    const phoneRef = ref('');
    const pwRef = ref('');
    const pwRef1 = ref('');
    let router = useRouter();

    function pwAgain() {
      //@ts-ignore
      pwRef.value.validate();
    }

    function onSubmit() {
      //@ts-ignore
      if (staffRef.value.validate() || phoneRef.value.validate() || pwRef.value.validate() || pwRef1.value.validate()) {
        if (type.value == '1') {
          //@ts-ignore
          if (companyRef.value.validate()) {
            postRequest('/party/party/companyRegister', {
              companyName: compony_name.value,
              userName: user_name.value,
              phone: loginID.value,
              password: password.value,
              companyType: '333',
              typeName: '延保',
              loginType: '1',
              loginName: '李四',
              // nickName: '小二',
              address: '上海',
              employeeId: '004'
            }, res => {
              setTimeout(()=>{
                $q.notify({
                  icon: 'done',
                  position: 'center',
                  color: 'positive',
                  message: res
                });
                void router.push('/login');
              },1000)
            });
          }
        } else if (type.value == '2') {
          postRequest('/party/party/registerEmployee', {
            userName: user_name.value,
            phone: loginID.value,
            password: password.value,
            companyId: companyId.value,
            companyName: companyName.value
          }, res => {
            setTimeout(()=>{
              $q.notify({
                progress: true,
                icon: 'done',
                position: 'center',
                color: 'positive',
                message: res
              });
              void router.push('/login');
            },1000)
          });
        }
      }
    }

    function onItemClick(id: string, name: string) {
      companyId.value = id;
      companyName.value = name;
    }

    function goBack(){
      router.go(-1)
    }
    onMounted(() => {
      type.value = <string>route.query.type;

      if (type.value == '2') {
        postRequest('/party/party/componty', '', (resData) => {
          compony_list.arr = resData;
        });
      }
    });

    return {
      route,
      compony_name,
      user_name,
      loginID,
      password,
      isPwd,
      isPwd1,
      again_password,
      type,
      compony_list,
      companyId,
      companyName,
      companyRef,
      staffRef,
      phoneRef,
      pwRef,
      pwRef1,
      onItemClick,
      onSubmit,
      pwAgain,
      goBack
    };
  }
});
</script>
<style scoped lang='sass'>
.login-control
  width: 100%

.login-background
  background-color: rgb(170, 212, 245)

.row-space
  margin-bottom: 1em

.col-space
  padding-right: 1em

.q-input
  width: 100%

.input-label
  padding-top: 1.4em

.big-title
  margin-bottom: 2em

.logo
  height: 8em

@mixin allSize-PX($pannel-width,$pannel-height,$pannel-padding)
  .login-pannel
    width: $pannel-width
    height: $pannel-height
  .inside-pannel
    padding-left: $pannel-padding
//桌面页面样式
@media screen and (min-device-width: 960px)
  @include allSize-PX($pannel-width: 36em, $pannel-height: 49em, $pannel-padding: 10%)
//移动页面样式
@media screen and (max-device-width: 960px)
  @include allSize-PX($pannel-width: 24em, $pannel-height: 36em, $pannel-padding: 1%)
</style>
